<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>办理入职</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store, must-revalidate">
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="expires" content="-1">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
          name="viewport">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }

        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        body {
            margin: 1px;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
            display: table;
        }

        table.text-center, table.text-center td, table.text-center th {
            text-align: center;
            font-size: x-small;
        }

        .table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
            border: 1px solid #cbcbcd;
        }

        .table th {
            background: yellow;
        }

        table td {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .table-bordered {
            border: 1px solid #cbcbcd;
        }

        .table {
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
        }

        .hidden {
            display: none;
        }

        .table-detail .td-title {
            background-color: #f5f5f5;
            text-align: center;
        }

        .table-detail td {
            border-right: 1px solid #e8e8e9;
            border-bottom: 1px solid #e8e8e9;
            padding-left: 2px !important;
            padding-right: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            height: 29px;
            line-height: 29px;
            text-align: left;
            position: relative;
        }

        .entryTitle {
            font-weight: bold;
            text-align: center !important;
        }

        .table-detail input[type=text], .table-detail input[type=number], .table-detail input[type=tel], .table-detail select {
            height: 24px;
            line-height: 24px;
            width: 100%;
            border-width: 0px;
            border-style: none;
            padding-left: 6px;
            padding-right: 0px !important;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            margin-left: 0px !important;
            margin-right: 0px !important;
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            text-indent: 2px;

        }

        td div {
            float: left;
            text-align: center;
            height: 100%;
        }

        .fj {
            color: #ddd;
            cursor: pointer;
            float: right;
            border-left: 1px solid #e8e8e9;
            padding: 0 2px;
        }

        .webuploader-pick {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: none;
            padding: 0;
            color: #74adf2;
            width: 100%;
            text-align: center;
        }

        .rightBorder {
            border-left: 1px solid #e8e8e9;
        }

        /*.table-detail {*/
        /*width:100%;*/
        /*margin: 0 auto;*/
        /*}*/

        /*.lookStyle {*/
        /*width: 100%;*/
        /*min-width: 1050px;*/
        /*}*/

        /*.lookStyle td {*/
        /*text-align: left;*/
        /*padding: 0 6px !important;*/
        /*}*/

        /*.lookStyle td.entryTitle, .lookStyle td.td-title {*/
        /*text-align: center;*/
        /*}*/

        /*.lookStyle td div {*/
        /*text-align: left;*/
        /*}*/

        /*.lookStyle .fj {*/
        /*cursor: not-allowed;*/
        /*}*/

        /*.entryTitle {*/
        /*font-weight: bold;*/
        /*width: 80px;*/
        /*}*/

        td .lookFj {
            max-width: 50px;
            color: #74adf2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            position: relative;
            cursor: pointer;
            background: url(/dist/img/upload_normal.gif) no-repeat 6px center;
            padding-left: 24px;
            text-align: left;
        }

        /*.delfile {*/
        /*position: absolute;*/
        /*right: 0;*/
        /*top: 0;*/
        /*width: 15px;*/
        /*height: 100%;*/
        /*line-height: 24px;*/
        /*text-align: center;*/
        /*font-size: 14px;*/
        /*border-radius: 50%;*/
        /*background: #fff;*/
        /*z-index: 1111111;*/
        /*color: #bbb;*/
        /*cursor: pointer;*/
        /*}*/

        /*.delfile:hover {*/
        /*color: red;*/
        /*}*/
    </style>
</head>
<body>
<iframe id="ifAttach" style="display:none"></iframe>
<section class="content" id="app">
    <table class="table-detail table table-bordered text-center">
        <tr>
            <td class="td-title" colspan="4">个人基本信息</td>
        </tr>
        <tr>
            <td class="entryTitle" style="width:70px;">档案号</td>
            <td style="width:120px;">
                <span>{{user.fileNo?user.fileNo:"系统自动生成"}}</span></td>
            <td class="entryTitle" style="width:60px;">入职时间</td>
            <td style="width:120px;"><span>{{user.entryDate}}</span></td>
        </tr>
        <tr>
            <td class="entryTitle">在职状态</td>
            <td><span>{{Flage2Name(user.jobState)}}</span>
            <td class="entryTitle">入职天数</td>
            <td><span>{{user.dayNumber}}天</span></td>
        </tr>
        <tr>
            <td class="entryTitle">姓名</td>
            <td>
                <div style="width: 60px;"><span>{{user.name}}</span></div>
                <div class="rightBorder lookFj" v-if="user.nameAttachName"
                     @click="download(user.nameAttachUrl,user.nameAttachName)">{{user.nameAttachName}}
                </div>
                <div class="fj" v-else>暂无附件</div>
            </td>
            <td class="entryTitle">性别</td>
            <td><span>{{user.sex=="0"?"男":"女"}}</span></td>
        </tr>
        <tr>
            <td class="entryTitle">联系电话</td>
            <td><span>{{user.tel}}</span></td>
            <td class="entryTitle">籍贯</td>
            <td><span>{{user.nativePlace}}</span></td>
        </tr>
        <tr>
            <td class="entryTitle">出生日期</td>
            <td><span>{{user.birthday}}</span></td>
            <td class="entryTitle">身份证号</td>
            <td>
                <div><span>{{user.card}}</span></div>
                <div class="rightBorder lookFj" v-if="user.cardAttachName"
                     @click="download(user.cardAttachUrl,user.cardAttachName)"
                >{{user.cardAttachName}}
                </div>
                <div v-else class="fj">暂无附件</div>
            </td>
        </tr>
        <tr>
            <td class="entryTitle">现居住址</td>
            <td><span>{{user.address}}</span></td>
            <td class="entryTitle">学历</td>
            <td>
                <div>
                    <span>{{user.education}}</span></div>
                <div class="rightBorder lookFj" v-if="user.educationAttachName"
                     @click="download(user.educationAttachUrl,user.educationAttachName)"
                >{{user.educationAttachName}}
                </div>
                <div v-else class="fj">暂无附件</div>
            </td>
        </tr>
        <tr>
            <td class="entryTitle">毕业院校</td>
            <td>
                <span>{{user.graduate}}</span></td>
            <td class="entryTitle">专业</td>
            <td><span>{{user.professional}}</span></td>
        </tr>
        <tr>
            <td class="td-title" colspan="4">岗位信息</td>
        </tr>
        <tr>
            <td class="entryTitle">部门-职位</td>
            <td colspan="3"><span>{{user.roleName}}</span></td>
        </tr>
        <tr v-for="(item,index) in user.userRoles">
            <td class="entryTitle">兼职</td>
            <td colspan="3"><input style="float:left;" type="text" v-model="item.roleName"/></td>
        </tr>
        <tr>
            <td class="entryTitle">上级</td>
            <td><span>{{user.parentName}}</span></td>
            <td class="entryTitle">邮箱</td>
            <td><span>{{user.email}}</span></td>
        </tr>
        <tr>
            <td class="td-title" colspan="4">办公用品配置</td>
        </tr>
        <tr>
            <td class="entryTitle">开户行</td>
            <td><span>{{user.bank}}</span></td>
            <td class="entryTitle">工资卡号</td>
            <td><span>{{user.wegeCard}}</span></td>
        </tr>
        <tr>
            <td class="entryTitle">手机卡</td>
            <td><span>{{user.tel}}</span></td>
            <td class="entryTitle">电脑</td>
            <td>
                <span v-if='user.computerStart==0'>无</span>
                <span v-if='user.computerStart==1'>自带</span>
                <span v-if='user.computerStart==2'>公司</span>
            </td>
        </tr>
        <tr>
            <td rowspan="3" class="entryTitle">车辆</td>
            <td>
                <div style=";font-weight: bold;width: 30px">
                    类型
                </div>
                <div class="rightBorder" style="width: 30px">
                    <span v-if='user.computerStart==0'>无</span>
                    <span v-if='user.computerStart==1'>私车</span>
                    <span v-if='user.computerStart==2'>公车</span>
                </div>
                <div class="rightBorder lookFj" v-if="user.carAttachName"
                     @click="download(user.carAttachUrl,user.carAttachName)"
                     style="">{{user.carAttachName}}
                </div>
                <div v-else class="fj">暂无附件</div>
            </td>
            <td class="entryTitle">油卡</td>
            <td><span>{{user.oilCard}}</span></td>
        </tr>
        <tr>
            <td>
                <div style=";font-weight: bold;width: 30px">
                    品牌
                </div>
                <div class="rightBorder" style="">
                    <span>{{user.carBrand}}</span></div>
            </td>
            <td class="entryTitle">型号</td>
            <td><span>{{user.carModel}}</span></td>
        </tr>
        <tr>
            <td>
                <div style="font-weight: bold;width: 30px">
                    车牌
                </div>
                <div class="rightBorder" style="">
                    <span>{{user.carCard}}</span></div>
            </td>
            <td class="entryTitle">车补</td>
            <td>
                <div style="">
                    <span>{{user.allowCard}}</span></div>
                <div class="rightBorder lookFj" v-if="user.allowAttachName"
                     @click="download(user.allowAttachUrl,user.allowAttachName)"
                >{{user.allowAttachName}}
                </div>
                <div v-else class="fj">暂无附件</div>
            </td>

        </tr>
        <tr>
            <td class="entryTitle">门禁卡</td>
            <td>
                <span>{{user.guardCard}}</span></td>
            <td class="entryTitle">工具</td>
            <td>
                <div>
                    <span>{{user.tool}}</span></div>
                <div class="rightBorder lookFj" v-if="user.toolAttachName"
                     @click="download(user.toolAttachUrl,user.toolAttachName)" style="width: 80px;">
                    {{user.toolAttachName}}
                </div>
                <div v-else class="fj">暂无附件</div>
            </td>
        </tr>
        <tr>
            <td class="entryTitle">POS机</td>
            <td>
                <span>{{user.pos}}</span></td>
            <td class="entryTitle">工服</td>
            <td>
                <span>{{user.workClothes}}</span></td>
        </tr>
        <tr>
            <td class="entryTitle">入职信息表</td>
            <td>
                <div class="lookFj" v-if="user.entrtyInforAttachName"
                     @click="download(user.entrtyInforAttachUrl,user.entrtyInforAttachName)">
                    {{user.entrtyInforAttachName}}

                </div>
                <div v-else class="fj">暂无附件</div>
            </td>
            <td class="entryTitle">入职协议</td>
            <td>
                <div class="lookFj" v-if="user.entrtyAgreeAttachName"
                     @click="download(user.entrtyAgreeAttachUrl,user.entrtyAgreeAttachName)">
                    {{user.entrtyInforAttachName}}
                </div>
                <div v-else class="fj">暂无附件</div>
            </td>

        </tr>
        <tr>
            <td class="entryTitle">劳工合同</td>
            <td>
                <div class="lookFj" v-if="user.contractAttachName"
                     @click="download(user.contractAttachUrl,user.contractAttachName)">
                    {{user.contractAttachName}}

                </div>
                <div v-else class="fj">暂无附件</div>
            </td>
            <td class="entryTitle">保密协议</td>
            <td>
                <div class="lookFj" v-if="user.secrecyAttachName"
                     @click="download(user.secrecyAttachUrl,user.secrecyAttachName)">
                    {{user.secrecyAttachName}}
                </div>
                <div v-else class="fj">暂无附件</div>
            </td>
        </tr>

        <template v-if="leave" v-for="(item,i) in leave">
            <tr>
                <td class="td-title" colspan="4">离职信息</td>
            </tr>
            <tr>
                <td class="entryTitle">离职日期</td>
                <td>{{item.leaveDate}}</td>
                <td class="entryTitle">离职类型</td>
                <td>{{item.leaveType=="0"?"辞职自动离职":"辞退"}}</td>
            </tr>
            <tr>
                <td class="entryTitle">离职原因</td>
                <td colspan="3">{{item.leaveReason}}</td>
            </tr>
            <tr>
                <td class="entryTitle">审计结果</td>
                <td>
                    <div v-if="item.auditAttachName" class="lookFj"
                         @click="download(item.auditAttachName,item.auditAttachUrl)">
                        {{item.auditAttachName}}
                    </div>
                    <div v-else class="fj">暂无附件</div>
                </td>

                <td class="entryTitle">离职会签单</td>
                <td>
                    <div v-if="item.leaveAttachName" class="lookFj"
                         @click="download(item.leaveAttachUrl,item.leaveAttachName)">
                        {{item.leaveAttachName}}
                    </div>
                    <div v-else class="fj">暂无附件</div>
                </td>

            </tr>
            <tr>
                <td class="entryTitle">离职说明</td>
                <td>
                    <div v-if="item.leaveDescAttachName" class=" lookFj"
                         @click="download(item.leaveDescAttachUrl,item.leaveDescAttachName)">
                        {{item.leaveDescAttachName}}
                    </div>
                    <div v-else class="fj">暂无附件</div>
                </td>
                <td class="entryTitle">解除劳动合同协议</td>
                <td>
                    <div v-if="item.leaveContractAttachName" class=" lookFj"
                         @click="download(item.leaveContractAttachUrl,item.leaveContractAttachName)">
                        {{item.leaveContractAttachName}}
                    </div>
                    <div v-else class="fj">暂无附件</div>
                </td>

            </tr>
        </template>

    </table>
</section>
<script src="https://file.ggxqce.com/web/jquery-2.2.3.min.js"></script>
<!--oa自定义  JS-->
<script src="https://file.ggxqce.com/web/vue.min.js"></script>
<script src="/dist/js/oaApp.js"></script>
<script type="text/javascript">
    var zTreeCallback = {
        onClick: function (event, treeId, treeNode) {
            if (treeNode.type === "role") {
                roleGlobal.roleId = treeNode.dataId;
                var node = app.treeObj.getNodeByParam("id", treeNode.departId, null);
                console.log(node)
                roleGlobal.roleName = node.name + "-" + treeNode.name;
                $("#ulZTree").hide();
            }
        }
    };
    var zTreeSetting = {
        view: {
            showIcon: function (treeId, treeNode) {
                return treeNode.isParent;
            }
        },
        data: {
            simpleData: {
                enable: true
            },
            keep: {
                parent: true
            }
        },
        callback: {
            onClick: zTreeCallback.onClick
        }
    };
</script>
<script type="text/javascript">

    var roleGlobal = null;
    var app = new Vue({
        el: '#app',
        data: {
            pageType: 'edit',//如果pageType=edit说明是编辑页面，如果pagetype=look，说明是查看页面
            user: {
                id: 0,
                fileNo: '',//档案号
                name: '',
                sex: '',
                tel: '',
                pwd: '111111',
                birthday: '',
                address: '',//现居住地
                graduate: '',//毕业院校
                nativePlace: '',//籍贯
                card: '',//身份证号
                education: '',//学历
                professional: '',//专业
                roleId: '',//职位ID
                roleName: '',
                userRoles: [],
                createUserId: "",
                updateUserId: "",
                entryDate: '',//入职时间
//                leaveDate: '',//离职时间
                jobState: '',//-2：试岗，-1：试用期，0：转正，1：离职，2：档案不全
//                sortNo: '',//排序
                parentId: '',
                parentName: '',
                email: '',
                bank: '',//开户行
                wegeCard: '',//工资卡
                computerStart: '',//电脑
                carCard: '',//车牌
                carStart: '',//类型
                carBrand: '',//类型
                oilCard: '',//油卡
                carModel: '',//型号
                allowCard: '',//车补
                guardCard: '',//门禁卡
                tool: '',//工具
                pos: '',//post机
                workClothes: '',//工服
                nameAttachName: '',
                nameAttachUrl: '',
                cardAttachName: '',
                cardAttachUrl: '',
                educationAttachName: '',
                educationAttachUrl: '',
                carAttachName: '',
                carAttachUrl: '',
                allowAttachName: '',
                allowAttachUrl: '',
                toolAttachName: '',
                toolAttachUrl: '',
                entrtyInforAttachName: '',
                entrtyInforAttachUrl: '',
                entrtyAgreeAttachName: '',
                entrtyAgreeAttachUrl: '',
                contractAttachName: '',
                contractAttachUrl: '',
                secrecyAttachName: '',
                secrecyAttachUrl: '',
                archivaType: 0
            },
            leave: '',
            desc: '',
            treeObj: null,
            treeNodes: []
        },
        methods: {
            Flage2Name: function (flage) {
                if (flage == "-2") return "试岗";
                if (flage == "-1") return "试用期";
                if (flage == "0") return "转正";
                if (flage == "1") return "离职";
                if (flage == "2") return "档案不全";
            },
            download: function (attachId, fileName) {
                if (attachId != null && attachId != "") {
                    var data = {
                        attachId: attachId,
                        fileName: fileName
                    }
                    prompt(JSON.stringify(data))
                }
//                $('#ifAttach').attr('src', server.ip + '/attach/downloadFile.json?fileUrl=' + attachId + '&fileName=' + fileName);
//                return false;
            }
        },
        mounted: function () {
            var that = this
            var data = {
                "userId": getUrlParamObj().userId
            };
            $.ajax({
                url: server.ip + urlConfig.system.user.getById,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                data: JSON.stringify(data),
                success: function (r) {
                    var user = JSON.parse(r)
                    user = user.data.sendData;
                    $.ajax({
                        url: server.ip + urlConfig.system.user2Role.getRolesByUserId,
                        contentType: 'application/json;charset=utf-8',
                        type: "POST",
                        data: JSON.stringify(data),
                        success: function (r) {
                            var userRoles = JSON.parse(r)
                            userRoles = userRoles.data.sendData;
                            user.userRoles = [];
                            if (user.userRoles) {
                                for (var i = 0; i < userRoles.length; i++) {
                                    user.userRoles.push({
                                        roleId: userRoles[i].id,
                                        roleName: userRoles[i].departName + "_" + userRoles[i].roleName,
                                        userId: 0
                                    });

                                }
                            }
                            that.user = user;
                        },
                        beforeSend: function () {

                        },
                        complete: function () {
                        },
                        error: function (e) {
                            alert(e.responseText)
                        }
                    });
                },
                error: function (e) {
                    alert(e.responseText)
                }
            });
            $.ajax({
                url: server.ip + urlConfig.system.user.getLeaveByUserId,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                data: JSON.stringify(data),
                success: function (r) {
                    var res = JSON.parse(r)
                    that.leave = res.data.sendData;
                },
                error: function (e) {
                    alert(e.responseText)
                }
            });
            $.ajax({
                url: server.ip + urlConfig.system.user.getUserDescByUserId,
                contentType: 'application/json;charset=utf-8',
                type: "POST",
                data: JSON.stringify(data),
                success: function (r) {
                    var res = JSON.parse(r)
                    that.desc = res.data.sendData;
                },
                error: function (e) {
                    alert(e.responseText)
                }
            });
        }
    });
</script>
</body>
</html>